# Rsbuild Plugin

帮助用户快速在 **Rsbuild App** 或 **Rslib** 中构建 Module Federation 产物

## 快速开始

### 安装

你可以通过如下的命令安装插件：

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm add @module-federation/rsbuild-plugin --save-dev',
    yarn: 'yarn add @module-federation/rsbuild-plugin --save-dev',
    pnpm: 'pnpm add @module-federation/rsbuild-plugin --save-dev',
    bun: 'bun add @module-federation/rsbuild-plugin --save-dev',
  }}
/>

### 注册插件
#### Rsbuild App
```ts title='rsbuild.config.ts'
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  server: {
    port: 2000,
  },
  plugins: [
    pluginReact(),
    pluginModuleFederation({
      name: 'federation_consumer',
      remotes: {
        remote1: 'remote1@http://localhost:2001/mf-manifest.json',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});
```

#### Rslib Module
``` ts title='rslib.config.ts'
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rslib/core';

export default defineConfig({
  lib: [
    // ...
    {
      format: 'mf',
      output: {
        distPath: {
          root: './dist/mf',
        },
        assetPrefix: 'xxx',
      },
      plugins: [
        // ...
        pluginModuleFederation({
          name: 'rslib_provider',
          exposes: {
            '.': './src/index.tsx',
          },
          shared: {
            react: {
              singleton: true,
            },
            'react-dom': {
              singleton: true,
            },
          },
        }),
      ],
    },
  ],
});
```

### 注意
如果需要使用 Module Federation 运行时能力，请安装 [@module-federation/enhanced](/zh/guide/basic/runtime/runtime.html)

## 配置

* 类型：

```ts
export declare const pluginModuleFederation: (moduleFederationOptions: ModuleFederationOptions, rsbuildOptions?: RSBUILD_PLUGIN_OPTIONS) => RsbuildPlugin;

type RSBUILD_PLUGIN_OPTIONS = {
  ssr?: boolean;
}
```

### moduleFederationOptions

[Module Federation 配置项](../../configure/index)

### rsbuildOptions

Rsbuild 插件额外配置。

#### ssr

:::tip
仅支持 Rslib 全局插件。
:::

* 类型：`boolean`
* 默认值：`false`


开启后可以生成 SSR 产物。

**示例：**

先通过 `npm create module-federation@next` 创建 Rslib 项目：

```bash
# 这里传递了 template role name 三个参数，你也可以直接执行 npm create module-federation@latest ，然后根据提示进行选择
npm create module-federation@next -- --template provider-rslib --role provider --name rslib_ssr_provider
```

然后修改 `rslib.config.ts` 配置，增加 `ssr:true` ：
```diff title='rslib.config.ts'
- plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+ plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig, { ssr: true })],
```

安装依赖，并启动项目：
```bash
pnpm install
pnpm run mf-dev
```
此时会生成 `dist/mf/ssr` 目录，里面包含了 SSR 产物。

然后参考[创建 Modern.js 消费者](../../practice/frameworks/modern/index) 章节，创建消费者，并引用 Rslib SSR 生产者，随后启动项目开发。
